﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="util" uri="functions"%>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 下拉框 -->
<link rel="stylesheet" href="/static/ace/css/chosen.css" />
<!-- jsp文件头和头部 -->
<%@ include file="../../system/index/top.jsp"%>
<!-- 日期框 -->
<link rel="stylesheet" href="/static/ace/css/datepicker.css" />
<!-- 分页控件 -->
<script type="text/javascript" src="/static/ace/js/jquery.js"></script>
<link type="text/css" href="/static/css/page/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="/static/css/page/bootstrap-pagination.min.css" rel="stylesheet" />
</head>
<body class="no-skin">

	<!-- /section:basics/navbar.layout -->
	<div class="main-container" id="main-container">
		<!-- /section:basics/sidebar -->
		<div class="main-content">
			<div class="main-content-inner">
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
							<div v-cloak id="div_all_data">
								<!-- 检索  -->
								<form method="post" name="Form" id="Form">

									<!-- 检索  -->

									<table id="simple-table" class="table table-striped table-bordered table-hover" style="margin-top: 5px;">
										<thead>
											<tr>
												<th class="center" style="width: 35px;">
													<label class="pos-rel">
														<input type="checkbox" class="ace" id="zcheckbox" />
														<span class="lbl"></span>
													</label>
												</th>
												<th class="center" style="width: 50px;">序号</th>
												<th class="center">名称</th>
												<th class="center">数量</th>
												<th class="center">添加时间</th>
											</tr>
										</thead>

										<tbody>
											<!-- 开始循环 -->
											<c:if test="${util:listAble() }">
												<tr v-for="(item,index) in data">
													<td class='center'>
														<label class="pos-rel">
															<input type='checkbox' name='ids' :value="item.id" class="ace" />
															<span class="lbl"></span>
														</label>
													</td>
													<td class='center' style="width: 30px;">{{index + 1}}</td>
													<td class='center'>{{item.name}}</td>

													<td class='center'>{{item.num}}</td>

													<td class='center'>{{item.addDate | datetime}}</td>

												</tr>

											</c:if>
											<c:if test="${!util:listAble() }">
												<tr>
													<td colspan="100" class="center">您无权查看</td>
												</tr>
											</c:if>

										</tbody>
									</table>
									<div class="page-header position-relative">
										<table style="width: 100%;">
											<tr>
												<td style="vertical-align: top;"></td>
												<!-- 分页的底部 -->
												<td style="vertical-align: top;">
													<nav style="float: right">
														<ul id="ul_page" class="pagination">
														</ul>
													</nav>
												</td>
											</tr>
										</table>
									</div>
								</form>
							</div>
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
		</div>
		<!-- /.main-content -->

		<!-- 返回顶部 -->
		<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
		</a>

	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->
	<!-- 页面底部js¨ -->
	<%@ include file="../../system/index/foot.jsp"%>
	<script type="text/javascript" src="/static/js/jquery-form.js"></script>
	<script type="text/javascript" charset="utf-8" src="/static/js/page/bootstrap-pagination.min.js"></script>
	<!-- 删除时确认窗口 -->
	<script src="/static/ace/js/bootbox.js"></script>
	<!-- ace scripts -->
	<script src="/static/ace/js/ace/ace.js"></script>
	<!-- 下拉框 -->
	<script src="/static/ace/js/chosen.jquery.js"></script>
	<!-- 日期框 -->
	<script src="/static/ace/js/date-time/bootstrap-datepicker.js"></script>
	<!--提示框-->
	<script type="text/javascript" src="/static/js/jquery.tips.js"></script>
	<!--vue-->
	<script type="text/javascript" src="/static/js/myjs/list-common.js"></script>
	<script type="text/javascript" src="/static/js/vue/vue.min.js"></script>
	<script type="text/javascript" src="/static/js/vue/vue-common-filter.js"></script>
	<script type="text/javascript">
		$(function() {
			//关闭加载状态
			top.hangge();

			//日期框
			$('.date-picker').datepicker({
				autoclose : true,
				todayHighlight : true,
				clearBtn : true
			});
			tosearch();
		});
		//检索
		function tosearch() {
			top.jzts();
			pageData.pageInfo = $('#Form').parseForm();
			pageList(0, pageData.pageInfo.size, 1);
		}
		//分页数据
		var pageData = {};
		pageData.total = "0";
		pageData.pageInfo = {};
		pageData.pageInfo.size = 10;
		pageData.pageInfo.current = 0;
		pageData.data = [];

		var pageVm = new Vue({
			el : '#div_all_data',
			data : pageData,
			methods : {
				edit : function(id) {
					//修改
					top.jzts();
					var diag = new top.Dialog();
					diag.Drag = true;
					diag.Title = "编辑";
					diag.URL = '/admin/articletag/edit?id=' + id;
					diag.Width = 1000;
					diag.Height = 750;
					diag.CancelEvent = function() { //关闭事件
						pageList(0, pageData.pageInfo.size, 1);
						diag.close();
					};
					diag.show();
				},
				del : function(id) {
					//删除
					bootbox.confirm("确定要删除吗?", function(result) {
						if (result) {
							top.jzts();
							var postData = {};
							postData.id = id;
							$.post("/admin/articletag/delete", postData, function(result) {
								top.hangge();
								if (result.code == 200) {
									bootbox.alert("成功", function() {
										pageList(0, pageData.pageInfo.size, 1);
									})
								}
							});
						}
					});
				},
				add : function() {
					//添加
					top.jzts();
					var diag = new top.Dialog();
					diag.Drag = true;
					diag.Title = "新增";
					diag.URL = '/admin/articletag/add';
					diag.Width = 1000;
					diag.Height = 750;
					diag.CancelEvent = function() { //关闭事件
						pageList(0, pageData.pageInfo.size, 1);
						diag.close();
					};
					diag.show();
				},
				deleteAll : function() {
					//批量删除
					bootbox.confirm("你确认要删除选中的数据吗？", function(result) {
						if (!result) {
							return;
						}
						var str = '';
						for (var i = 0; i < document.getElementsByName('ids').length; i++) {
							if (document.getElementsByName('ids')[i].checked) {
								if (str == '')
									str += document.getElementsByName('ids')[i].value;
								else
									str += ',' + document.getElementsByName('ids')[i].value;
							}
						}
						if (str == '') {
							bootbox.dialog({
								message : "<span class='bigger-110'>您没有选择任何内容!</span>",
								buttons : {
									"button" : {
										"label" : "确定",
										"className" : "btn-sm btn-success"
									}
								}
							});
							$("#zcheckbox").tips({
								side : 1,
								msg : '点这里全选',
								bg : '#AE81FF',
								time : 8
							});
							return;
						}
						top.jzts();
						$.post("/admin/articletag/deleteAll", {
							ids : str
						}, function(result) {
							if (result.code == 200) {
								pageList(0, pageData.pageInfo.size);
							} else {
								bootbox.alert(data.mes);
							}
						});
					});
				}

			}
		})

		//分页查询
		function pageList(pageIndex, pageSize, type) {
			pageData.pageInfo.current = ((pageIndex - 0) + 1);
			pageData.pageInfo.size = pageSize;
			$.post("/admin/articletag/list", pageData.pageInfo, function(result) {
				if (result.code == 200) {
					pageData.data = [];
					var resultData = result.data.data;
					pageData.total = result.data.total;
					if (type == 1) {
						initBootstrap(parseInt(result.data.total));
					}
					for (var i = 0; i < resultData.length; i++) {
						pageData.data.push(resultData[i]);
					}
				}
				top.hangge();
			})
			
		}

		//分页初始化
		function initBootstrap(total) {
			BootstrapPagination($("#ul_page"), {
				//记录总数。 
				total : total,
				//当前页索引编号。从其开始（从0开始）的整数。
				pageIndex : 0,
				pageGroupSize : 5,
				pageSize : 10,
				//当分页更改后引发此事件。
				pageChanged : function(pageIndex, pageSize) {
					pageList(pageIndex, pageSize, 2);
				},
			});
		}

		//导出excel
		function toExcel() {
			var preAction = $("#Form").attr("action");
			$("#Form").attr("action", "/admin/articletag/excel");
			$("#Form").submit();
			$("#Form").attr("action", preAction);
		}
	</script>


</body>
</html>